<template>
	<!-- D:/project/app/ydz-app-uniapp/static/images/login -->
	<view class="pagebody" :style="{ minheight: maxHeight }">
		<view class="topbgbox">
			<view class="justify-between align-center">
				<image @click="backpage" src="@/static/images/login/leftjt.png" alt="" style="width: 48rpx;height: 48rpx;"></image>
				<view class="color303b39 fz40 fwbold" >
					绑定手机
				</view>
				<view class="">
					
				</view>
			</view>
			<view class="">
				<view class="fz32 color303b39 flex-row align-center" style="margin-top: 100rpx;">
					<span style="color: #576260;margin-right: 24rpx;">国家/地区</span>中国+86<image
						src="@/static/images/login/rightjt.png" alt="" style="width: 32rpx;height: 32rpx;"></image>
				</view>
			</view>
			<view class="inputbox" style="margin-top: 48rpx;">
				<uni-easyinput v-model="phoneForm.phone" :placeholderStyle="placeholderStyle"
					placeholder="请输入手机号"></uni-easyinput>
			</view>
			<view class="inputbox pos-rel" style="margin-top: 48rpx;">
				<view v-if="isCountingDown" class="pos-abs" style="right: 0; top: 20rpx;">
					{{countDown}}秒后重发
				</view>
				<view v-else class="pos-abs" style="z-index: 99;;color: #00D9B2;right: 0; top: 20rpx;"  @click="getSmsCode">
					获取验证码
				</view>
				<uni-easyinput type="number" :clearable="false" v-model="phoneForm.code" :placeholderStyle="placeholderStyle"
					placeholder="请输入验证码"></uni-easyinput>
			</view>
			<view  style="margin-top: 78rpx; color: #576260;" class="fz26 flex-row align-center">
				<checkbox-group @change="changebox">
					<label>
						<checkbox value="cb" color="#FFCC33" style="transform:scale(0.7)" />
					</label>
				</checkbox-group>
				同意<span @click="toyspage(1)" style="color: #50A495;margin: 0 16rpx;">用户协议</span>和<span
					style="color: #50A495;margin: 0 16rpx;" @click="toyspage(2)">隐私政策</span>
			</view>
			<view class="align-center loginbtn justify-between">
				<button class="button fwbold" type="primary" @click="submit">确认绑定</button>
			</view>

			
			
		</view>
		<u-toast ref="uToast" />



	</view>
</template>

<script>
	import {
		sendSmsCode,
	} from '@/api/login.js'
	import {
		changePhoneNum,
	} from '@/api/api.js'
	
	export default {
		onLoad() {
			// 获得屏幕最大高度
			let systemInfo = uni.getSystemInfoSync();
			this.maxHeight = systemInfo.windowHeight + "px";
		},
		data() {
			return {
				maxHeight: '',
				agree:false,
				phoneForm:{
					phone: '',
					code:'',
					id:0,
				},
				
				isCountingDown: false, // 是否正在倒计时
				countDown: 60, // 倒计时秒数
				countDownTimer: null, //计时器
				codeid:null,
				operateId:1,

				placeholderStyle: "color:#7E8987;font-size:32rpx",
				
			}
		},
		methods: {
			toyspage(typeid){
				 uni.navigateTo({ url:'/pages/mine/privacy/index?typeid='+typeid });
			},
			submit(){
				if (this.phoneForm.phone === "") {
				  this.$refs.uToast.show({
				  	title: '请输入您的手机号',
				  })	
				} else if (this.phoneForm.code === "") {
				  this.$refs.uToast.show({
				  	title: '请输入您的验证码',
				  })	
				} else if (!this.agree) {
				  this.$refs.uToast.show({
				  	title: '请勾选同意用户协议和隐私政策',
				  })	
				} else {
				  changePhoneNum(this.phoneForm).then(res=>{
					this.$refs.uToast.show({
						title: '更换成功！',
						type: 'success',
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 1000)
				  })
				}
			},
			backpage(){
				uni.navigateBack({
				    delta: 1
				});
			},
			changebox(e) {
				if (e.detail.value.length > 0) {
					this.agree = true
				} else {
					this.agree = false
				}
			},
			getSmsCode() {
				// 发送请求后提示"正在获取验证码"打开倒计时
				if (this.phoneForm.phone) {
					uni.showLoading({
						title: '正在获取验证码'
					})
					let data = {
						phone:this.phoneForm.phone,
						operateId:this.operateId
					}
					sendSmsCode(data).then(res=>{
						this.phoneForm.id = res.data
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 开启计时器
						this.startCountDown();
					})
					// setTimeout(() => {
					// 	uni.hideLoading();
					// 	// 这里此提示会被this.start()方法中的提示覆盖
					// 	this.$u.toast('验证码已发送');
					// 	// 开启计时器
					// 	this.startCountDown();
			
					// }, 2000);
				}
			},
			// 开启倒计时
			startCountDown() {
				this.isCountingDown = true;
				this.countDown = 60;
			
				this.countDownTimer = setInterval(() => {
					this.countDown--;
					if (this.countDown <= 0) {
						this.resetCountDown();
					}
				}, 1000);
			},
			// 重置倒计时
			resetCountDown() {
				clearInterval(this.countDownTimer);
				this.isCountingDown = false;
				this.countDown = 60;
			},
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background: #fff;
	}

	::v-deep .is-input-border {
		border: none;
	}

	::v-deep .uni-easyinput__content {
		background: transparent !important;
	}

	::v-deep .uni-input-input {
		font-size: 32rpx;
	}
	
	::v-deep uni-checkbox .uni-checkbox-input {
		background: transparent;
	}
	
	::v-deep uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		color: #fff;
		border-color: #00D9B2;
		background: #00D9B2;
	}
	
	::v-deep .uni-icons{
		font-size: 52rpx;
	}

	.pagebody {
		box-sizing: border-box;

		.topbgbox {
			
			box-sizing: border-box;
			padding: 14rpx 40rpx 0;
			background-image: url('/static/images/login/otherbg.png');
			position: relative;
			background-repeat: no-repeat;
			background-size: cover;

			.inputbox {
				border-bottom: 1px solid #B8C3C1;
				padding-bottom: 0.1rem;
			}
			.loginbtn{
				// position: absolute;
				// bottom: 0;
				margin-top: 96rpx;
				uni-button {
					background-color: #00D9B2;
					border-radius: 98rpx;
					width: 668rpx;
				}
				
				uni-button:after {
					border: none;
				}
				
				.button {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 36rpx;
				
				}
			}
		}

	}
</style>